<template>
<div>
  <!-- 头部 -->
  <div class="header">
    <img src="./img/runoob-logo.png">
    <input type="text" placeholder="html教程">
  </div>
  <!-- 导航栏 -->
  <div class="topbar">
    <ul class="pc-nav" v-for="item in topBarList" :key="item">
      <li><a href="">{{ item }}</a></li>

     </ul>
  </div>
  <!-- 内容 -->
  <div class="main">
    <div class="left">
      <div class="lanmu">
        <img src="./img/lanmu.png">
        <div class="text">HTML教程</div>
        
      </div>
      <ul class="ult" v-for="item in leftBarList" :key="item">
        <li>{{ item }}</li>
    
      </ul>
    </div>
    <div class="midle">
        <div class="top">
          <div class="left1">〈 HTML表单</div>
          <div class="right1">HTML表单 〉</div>
        </div>
        <div class="title">
         <h1> 30<text>梅坤勇</text></h1>
        </div>
        <div class="title-mini">
          通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
         </div>
         <iframe src="https://www.runoob.com"></iframe>
    </div>
    <!-- <div class="right">
        <img src="./img/gg.png" alt="">
    </div> -->
  </div>
</div>
  


</template>
<script>
export default {
  data() {
    return {
      topBarList: [
        '首页',
        'HTML',
        'CSS',
        'JAVASCRIPT',
        'VUE',
        'BOOTSTRAP',
        'NODEJS',
        'PYTHON3',
        'PYTHON2',
        'JAVA',
        'C',
        'C++',
        'C#',
        'GO',
        'SQL',
        'LINU',
        'JQUERY',
        '本地连接'
      ],
      leftBarList: [
        'HTML 教程',
        'HTML 简介',
        'HTML 编辑器',
        'HTML 基础',
        'HTML 元素',
        'HTML 属性',
        'HTML 标题',
        'HTML 文本格式化',
        'HTML 链接',
        'HTML 头部',
        'HTML CSS',
        'HTML 图像',
        'HTML 表格',
        'HTML 列表',
        'HTML 区块',
        'HTML 布局',
        'HTML 表单',
        'HTML 框架',
        'HTML 颜色',
        'HTML 颜色名',
        'HTML 颜色值',
        'HTML 脚本',
        'HTML UR',
        'HTML UR',
        'HTML UR',
        'HTML UR',
        'HTML UR'
      ],
      flag: 0
    }
  },
  methods: {
    clickList(index) {
      console.log(index)
      this.flag = index
    }
  }
}
</script>
<style >
*{
  margin: 0 auto;
  padding: 0;
  background-color: RGB(246,246,246);
}
.header{
  box-sizing: border-box;
  width: 1260px;
  margin: 0 auto;
  
  margin-top: 30px;
  height: 70px;
  padding: 0 25px;
  margin-bottom: 20px;
}
.header img{
  margin-top: 15px;
}
.header input{
  margin-top: 10px;
  float: right;
  height: 48px;
  width: 420px;
  outline: none;
  border: none;
  border-radius: 5px;
  padding: 0 15px;
  font-size: 18px;
  background-color: white;
  box-shadow: 0px 4px 9px rgb(0 0 0 / 20%);
}
.topbar{
  background-color: #96b97d;
  width: 100%;

}
.topbar ul{
  display: flex;
  list-style: none;
  width: 1260px;
  margin: 0 auto;
  background-color: #96b97d;
  justify-content: space-between;
}
.topbar ul>li{

  flex-grow: 1;
 
  display: flex;
  text-align: center;
}
.topbar a{
  height:40px;
  line-height: 40px;
  background-color: #96b97d;
  text-decoration:none;
  flex-grow: 1;
  margin: 0 auto;
  color: rgb(255, 255, 255);
}
.topbar a:hover{
color: dimgray;
}
.main{
  margin: 0 auto;
  width: 1260px;
  margin-top: 20px;

  display: flex;
  justify-content: space-between;
}
.main>div{

}
.main .left{
  width: 250px;
  background-color: rgb(255, 255, 255);
  height: auto;
}
.main .midle{
  background-color: rgb(255, 255, 255);
  width: 760px;
  height: 550px;
}
.main .right{
  width: 210px;
  height: 100px;
 
}
.left .lanmu{
  background-color: RGB(234,234,235);
  text-shadow: 0 1px 0 rgb(255 255 255 / 15%);
  border: 1px solid rgba(0,0,0,.1);
  color: #64854c;
  box-sizing: border-box;
  padding-left: 4px;
  display: flex;
  justify-content: flex-start;
}
.left .lanmu  img{
  display: block;
 
 
}
.left .lanmu .text{
  display: block;
  background-color: RGB(234,234,235);
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  margin-right: 80px;
  padding-top: 2px;
}
.left ul{
  list-style: none;
  margin: 3px 5px;
}
.left ul>li{
  line-height: 30px;
  background-color: #f6f4f0;
  text-decoration: none;
  display: block;
  padding: 4px;
  border-bottom: 1px solid #efefef;
  color: rgb(63, 62, 62);
  font-size: 15px;
  padding-left: 10px;
}

.left ul>li:hover{
  color: rgb(0, 0, 0);
  font-weight: bold;
}
.left ul>li:nth-child(1){
  background-color: rgb(150, 185, 125);
  font-weight: bold;
  color: rgb(255, 255, 255);
}

.main .midle .top{
  background-color: RGB(251,251,251);
  width: 100%;
  height: 45px;
  overflow: hidden;
  padding: 0px 10px;
  line-height: 45px;
  background: #fbfbfb;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  color: #8590a6;
  font-size: 15px;
  border: 1px solid #e7eaf1;
  box-shadow: 0 1px 3px rgb(0 37 55 / 5%);
  box-sizing: border-box;
}
.main .midle .top .left1{
  float: left;
}
.main .midle .top .right1{
  float: right;
}
.main .midle .title{
  background-color: #ffff !important;
  width: 95%;
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
    font-size: 12px;
    
}
.main .midle .title h1{
  background-color: white;
  border-bottom: 1px solid rgb(221, 218, 218);
}
.main .midle .title text{
  color: rgb(67, 110, 37);
  background-color: white;
}
.main .midle .title-mini{
  margin-top: 5px;
  width: 95%;
  font-size: 14px;
  background-color: white;
  border-bottom: 20px;
}
.main .midle iframe{
  
  display: block;
  width: 95%;
  height: 400px;
  margin: 0 auto;
  margin-top: 10px;
  border: none;
}
</style>